<template>
  <div class="check-problem">
    <el-dialog
      v-model="dialogVisible"
      class="review-dialog"
      width="800"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="header">
        <div class="title">查看题目</div>
        <div class="header-right">
          <div class="close" @click="close">
            <i class="iconfont icon-chahao1 close-dialog"></i>
          </div>
        </div>
      </div>
      <div class="content">
        <problem :problem="problemData"></problem>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, computed, nextTick } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import problem from "@/pages/ojPage/quiz/components/problem.vue";

const dialogVisible = ref(false);
const problemData = ref({
  input: "",
  examples: {
    input: [],
    output: [],
  },
});
const open = (checkProblem = null) => {
  dialogVisible.value = true;
  if (checkProblem) {
    problemData.value = checkProblem;
  }
  nextTick(() => {
    document.querySelector(".check-problem .content").scrollTo({
      top: 0,
      behavior: "smooth",
    });
  });
};

const close = () => {
  dialogVisible.value = false;
  problemData.value = {
    input: "",
    examples: {
      input: [],
      output: [],
    },
  };
};

defineExpose({
  open,
});
</script>

<style lang="less" scoped>
.check-problem {
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;

    .title {
      line-height: 33px;
      font-weight: 700;
      font-size: 24px;
      color: #222;
    }

    .header-right {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 4px;

      .close {
        margin-left: 10px;

        .close-dialog {
          cursor: pointer;
          font-size: 34px;
          color: #8c8c8c;
          transition: all 0.3s ease-in-out;

          &:hover {
            color: #8c8c8cbd;
          }
        }
      }
    }
  }
  .content {
    overflow-y: auto;
    height: 450px;
  }
}
</style>
